<template>
  <div class="ex-grid-sub-form">
    <div class="row-header">
      <div class="column-label">操作</div>
      <el-button
        class="column-btn"
        type="primary"
        round
        size="small"
        @click="handleAdd"
      >
        新增
      </el-button>
    </div>
    <div
      class="row-column"
      v-for="(subForm, index) of subFormList"
      :key="index"
    >
      <template v-if="widgetData.options.showRowIndex">
        <div class="row-on-column" v-if="!isShow">#{{ index + 1 }}</div>
      </template>
      <div class="row-field-column field-border-right" v-if="!isShow">
        <template v-for="item in widgetData.children" :key="item.id">
          <template v-if="item.category === 'container'">
            <component
              :is="`${item.type}-item`"
              :widget-data="item"
              :designer="designer"
              :form-data="formData"
              :key="item.id"
            />
          </template>
          <template v-else>
            <form-item
              :designer="designer"
              :widget-data="item"
              :form-data="formData"
              :key="item.id"
            />
          </template>
        </template>
      </div>
      <div class="row-action-column">
        <el-button
          icon="Plus"
          type="primary"
          plain
          circle
          @click="handleInset(index)"
        />
        <el-button
          icon="Delete"
          type="danger"
          plain
          circle
          @click="handleDelete(index)"
        />
        <template v-if="widgetData.options.showRowIndex">
          <div class="row-on-index" v-if="isShow">#{{ index + 1 }}</div>
        </template>
      </div>
      <div class="row-field-column" v-if="isShow">
        <template v-for="item in widgetData.children" :key="item.id">
          <template v-if="item.category === 'container'">
            <component
              :is="`${item.type}-item`"
              :widget-data="item"
              :designer="designer"
              :form-data="subForm"
              :key="item.id"
            />
          </template>
          <template v-else>
            <form-item
              :designer="designer"
              :widget-data="item"
              :form-data="subForm"
              :key="item.id"
            />
          </template>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { ElMessageBox, Action } from "element-plus";
import { renContainerProps } from "./container";

const props = defineProps(renContainerProps);

const subFormList = ref<Array<object>>([]);
const isShow = computed(
  () => props.widgetData.options.columnPosition === "left"
);

const initSubFormList = () => {
  let { showBlankRow } = props.widgetData.options;
  if (showBlankRow) subFormList.value.push({});
};

const handleAdd = () => {
  subFormList.value.push({});
};

const handleInset = (index: number) => {
  subFormList.value.splice(index + 1, 0, {});
};

const handleDelete = (index: number) => {
  ElMessageBox.alert("删除当前行？", "提示", {
    showCancelButton: true,
    callback: (action: Action) => {
      if (action == "confirm") {
        subFormList.value.splice(index, 1);
      }
    }
  });
};

initSubFormList();
</script>
